<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端相关拓展题 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/42.9f41aa47.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link router-link-active">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link router-link-active">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/exam/" aria-current="page" class="sidebar-link">介绍</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>面试相关</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/exam/resume-ryf.html" class="sidebar-link">如何写一份有效的技术简历？</a></li><li><a href="/docs/exam/2020-interview-ms.html" class="sidebar-link">2020 年前端面试提纲</a></li><li><a href="/docs/exam/html-css.html" class="sidebar-link">HTML&amp;CSS 面试题</a></li><li><a href="/docs/exam/javascript.html" class="sidebar-link">JavaScript 面试题</a></li><li><a href="/docs/exam/vue.html" class="sidebar-link">Vue 面试题</a></li><li><a href="/docs/exam/actual-interview.html" class="sidebar-link">开放性题目</a></li><li><a href="/docs/exam/expand.html" aria-current="page" class="active sidebar-link">前端相关拓展题</a></li><li><a href="/docs/exam/webpack-inter-qu.html" class="sidebar-link">关于 webpack 的面试题总结</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文摘</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/exam/need-happy.html" class="sidebar-link">一个人需要多少土地</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>前端相关拓展题</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/exam/expand.html#http" class="synopsis-link">HTTP</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/exam/expand.html#_1-必考-http-状态码知道哪些-分别什么意思" class="synopsis-link">1. 必考：HTTP 状态码知道哪些？分别什么意思？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_2-大公司必考-http-缓存有哪几种" class="synopsis-link">2. 大公司必考：HTTP 缓存有哪几种？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_3-必考-get-和-post-的区别" class="synopsis-link">3. 必考：GET 和 POST 的区别</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_4-cookie-v-s-localstorage-v-s-sessionstorage-v-s-session" class="synopsis-link">4. Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session</a></li></ul></li><li class="synopsis-li"><a href="/docs/exam/expand.html#webpack" class="synopsis-link">Webpack</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/exam/expand.html#_1-必考-有哪些常见-loader-和-plugin-你用过哪些" class="synopsis-link">1. 必考：有哪些常见 loader 和 plugin，你用过哪些？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_2-英语题-loader-和-plugin-的区别是什么" class="synopsis-link">2. 英语题：loader 和 plugin 的区别是什么？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_3-必考-如何按需加载代码" class="synopsis-link">3. 必考：如何按需加载代码？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_4-必考-如何提高构建速度" class="synopsis-link">4. 必考：如何提高构建速度？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_5-转义出的文件过大怎么办" class="synopsis-link">5. 转义出的文件过大怎么办？</a></li><li class="synopsis-li"><a href="/docs/exam/expand.html#_6-webpack与grunt、gulp的不同" class="synopsis-link"># 6. webpack与grunt、gulp的不同？</a></li></ul></li><li class="synopsis-li"><a href="/docs/exam/expand.html#你知道哪些-js-的库或者框架-他们的作用分别是什么-请至少说出-5-个" class="synopsis-link">你知道哪些 JS 的库或者框架，他们的作用分别是什么？请至少说出 5 个</a></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><h2 id="http"><a href="#http" class="header-anchor">#</a> HTTP</h2> <h3 id="_1-必考-http-状态码知道哪些-分别什么意思"><a href="#_1-必考-http-状态码知道哪些-分别什么意思" class="header-anchor">#</a> 1. 必考：HTTP 状态码知道哪些？分别什么意思？</h3> <ul><li><p>2xx 没问题（成功响应）</p> <ul><li>200 ok 请求成功。</li> <li>201 <strong>请求已经被实现</strong>（该请求已成功），并因此创建了一个新的资源。这通常是在POST请求，或是某些PUT请求之后返回的响应。</li> <li>204 created</li></ul></li> <li><p>3xx 进一步操作（重定向）</p> <ul><li>301 永久重定向（被请求的资源已永久移动到新位置）</li> <li>302 临时重定向（请求的资源现在临时从不同的 URI 响应请求）</li></ul></li> <li><p>4xx 客户端出错（客户端响应）</p> <ul><li>401 当前请求需要用户验证。(未授权) 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。</li> <li>404 请求失败，服务器找不到请求的网页。</li> <li>414 URL长度过长。请求的URI 长度超过了服务器能够解释的长度，因此服务器拒绝对该请求提供服务。</li></ul></li> <li><p>5xx 服务端出错（服务端响应）</p> <ul><li>500 (服务器内部错误) 服务器遇到错误，无法完成请求。</li> <li>502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。（服务器过载）</li></ul></li></ul> <h3 id="_2-大公司必考-http-缓存有哪几种"><a href="#_2-大公司必考-http-缓存有哪几种" class="header-anchor">#</a> 2. 大公司必考：HTTP 缓存有哪几种？</h3> <p><strong>参考文章</strong></p> <ul><li><a href="https://www.jianshu.com/p/227cee9c8d15" target="_blank" rel="noopener noreferrer">一文读懂http缓存（超详细）<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.cnblogs.com/chenqf/p/6386163.html" target="_blank" rel="noopener noreferrer">彻底弄懂HTTP缓存机制及原理<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="_3-必考-get-和-post-的区别"><a href="#_3-必考-get-和-post-的区别" class="header-anchor">#</a> 3. 必考：GET 和 POST 的区别</h3> <p>错误答案：</p> <ol><li>POST 安全 GET 不安全（实际上两个都不安全）</li> <li>GET URL有长度限制（1024个字节），POST 没有（实际上两个都有长度限制，POST的限制一般是4M，10M，20M）</li> <li>GET 参数是放在 URL，POST 是放在消息体中（实际上都可以放在消息体中）</li> <li>GET 只需要一个报文，POST 需要两个以上（因为POST一般有消息体，GET一般没有消息体，只有消息头）</li> <li>GET 幂等，POST 不幂等（多次 GET 请求的结果是相同的，但多次POST请求可能会造成数据库返回的结果不同，「实际上是废话，GET 是获取，当然不会改变数据库。POST 是提交，当然会改变数据库」）</li></ol> <p>正确答案：</p> <p>GET 和 POST 最大的区别应该是语义上：GET 是获取数据，POST 是提交数据</p> <h3 id="_4-cookie-v-s-localstorage-v-s-sessionstorage-v-s-session"><a href="#_4-cookie-v-s-localstorage-v-s-sessionstorage-v-s-session" class="header-anchor">#</a> 4. Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session</h3> <p><strong>Cookie</strong></p> <ul><li>服务器发给浏览器的一段字符串，浏览器每次访问对应域名，都要带上该字符串。</li></ul> <p><strong>Session</strong></p> <ul><li>会话 - 表示浏览器与服务器一段时间内的会话</li></ul> <p><strong>Cookie</strong>与<strong>Session</strong>的区别：</p> <ul><li>Session 在服务器上，Cookie 在浏览器中。Session 是基于 Cookie 实现的。一般我们会将 Session ID 放到 Cookie 里面来实现 Session</li></ul> <p><strong>Cookie</strong>与<strong>LocalStorage</strong>的区别：</p> <ol><li>Cookie 的大小一般是4K，LocalStorage 的大小一般是 5M</li> <li>Cookie 一般用来存用户信息，LocalStorage 一般用来存储不那么重要的信息</li> <li>Cookie 是需要发送到服务器上的，LocalStorage 则不需要</li></ol> <p><strong>LocalStorage</strong>与<strong>SessionStorage</strong>的区别：</p> <ul><li>LocalStorage 不会过期，SessionStorage 会在 Session 结束时过期</li></ul> <h2 id="webpack"><a href="#webpack" class="header-anchor">#</a> Webpack</h2> <h3 id="_1-必考-有哪些常见-loader-和-plugin-你用过哪些"><a href="#_1-必考-有哪些常见-loader-和-plugin-你用过哪些" class="header-anchor">#</a> 1. 必考：有哪些常见 loader 和 plugin，你用过哪些？</h3> <p><strong>常见的Loader，及功能</strong></p> <ul><li>file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件</li> <li>url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去</li> <li>source-map-loader：加载额外的 Source Map 文件，以方便断点调试</li> <li>image-loader：加载并且压缩图片文件</li> <li>babel-loader：把 ES6 转换成 ES5</li> <li>css-loader：加载 CSS，支持模块化、压缩、文件导入等特性</li> <li>style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。</li> <li>eslint-loader：通过 ESLint 检查 JavaScript 代码</li></ul> <p><strong>常见的Plugin，及功能</strong></p> <ul><li>define-plugin：定义环境变量</li> <li>commons-chunk-plugin：提取公共代码</li> <li>uglifyjs-webpack-plugin：通过<code>UglifyES</code>压缩<code>ES6</code>代码</li></ul> <h3 id="_2-英语题-loader-和-plugin-的区别是什么"><a href="#_2-英语题-loader-和-plugin-的区别是什么" class="header-anchor">#</a> 2. 英语题：loader 和 plugin 的区别是什么？</h3> <ul><li>loader 是加载器，plugin 是插件。</li> <li>loader一般对应文件，比如css-loader就是用来加载css文件的，bable-loader就是用来加载js文件的．</li> <li>plugin 一般用于安装一些插件，扩展webpack的功能．</li></ul> <h3 id="_3-必考-如何按需加载代码"><a href="#_3-必考-如何按需加载代码" class="header-anchor">#</a> 3. 必考：如何按需加载代码？</h3> <p><code>import('文件名称')</code></p> <h3 id="_4-必考-如何提高构建速度"><a href="#_4-必考-如何提高构建速度" class="header-anchor">#</a> 4. 必考：如何提高构建速度？</h3> <p>使用：happypack，dll，code，split</p> <h3 id="_5-转义出的文件过大怎么办"><a href="#_5-转义出的文件过大怎么办" class="header-anchor">#</a> 5. 转义出的文件过大怎么办？</h3> <p>压缩js，css，图片</p> <p><code>import()</code></p> <p><strong>参考文章</strong></p> <p><a href="https://zhuanlan.zhihu.com/p/44438844" target="_blank" rel="noopener noreferrer">https://zhuanlan.zhihu.com/p/44438844<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_6-webpack与grunt、gulp的不同"><a href="#_6-webpack与grunt、gulp的不同" class="header-anchor">#</a> # 6. webpack与grunt、gulp的不同？</h3> <p>三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。</p> <h2 id="你知道哪些-js-的库或者框架-他们的作用分别是什么-请至少说出-5-个"><a href="#你知道哪些-js-的库或者框架-他们的作用分别是什么-请至少说出-5-个" class="header-anchor">#</a> 你知道哪些 JS 的库或者框架，他们的作用分别是什么？请至少说出 5 个</h2> <p>JS库和框架</p> <ol><li>框架：Vue、React</li> <li>组件库：Element UI</li> <li>打包工具：Webpack、Parcel</li> <li>轮播插件：swiper</li></ol> <p>更多答案</p> <ol><li>underscore ：为 JavaScript 中的常见任务提供实用的函数</li> <li>lodash ：为数组、字符串、object 和 argument 对象提供更一致的跨环境迭代支持</li> <li>Moment：用于解析、验证、操作和格式化日期</li> <li>chartJS ：使用 <code>&lt;canvas&gt;</code> 标签创建简单的HTML5图表，实现数据可视化</li> <li>MathJS ：该库包含一个灵活的表达式解析器，能够运行符号计算，并提供了一系列内置函数和常量</li></ol></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-03-31 21:18</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/exam/actual-interview.html" class="prev">开放性题目</a></span> <span class="next"><a href="/docs/exam/webpack-inter-qu.html">关于 webpack 的面试题总结</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/42.9f41aa47.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
